<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<!--导航-->
<nav class="gird-header">
    <div th:replace="~{_fragment::menu(7)}"></div>
</nav>


<!--顶部背景图片-->
<div class="m-bg-type_outer" style="width: 100%;height: 40%">
    <img src="../static/images/aboutbg.jpg" th:src="@{/images/aboutImg.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
    <div class="m-bg-class_cover">
        <div class="ui container" style="position: relative ;bottom: -540px;">
            <div class="m-font-size-title" align="center" style="font-family:'STXingkai'">关于我</div>
            <div class="m-font-size-text-init-title m-margin-top" align="center">头一次活这么久，记得善待自己</div>
        </div>
    </div>
</div>

<!--个人资料描述-->
<div class="ui container m-opacity box-shadow-max">
    <div class="ui segment m-margin-" align="center">
        <div class="m-margin-top-large" align="center">
            <img class="ui circular image" align="center" src="../static/images/me.jpg" th:src="@{/images/me.jpg}" style="width: 150px;height: 150px;">
        </div>
    <div class="m-margin-top-small" style="font-size: x-large;font-family: STSong" align="center">番茄西红柿</div>

    <div class="m-margin-top" align="center">
        <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
        <a href="#" class="ui qq circular icon button" data-content="2247911483" data-position="bottom center"><i class="qq icon"></i></a>
        <a href="https://github.com/lwh-559" target="_blank" class="ui github circular icon button" data-content="点击跳转GitHub" data-position="bottom center"><i class="github icon"></i></a>
        <a href="https://gitee.com/lwh_559" target="_blank" class="ui git circular icon button" data-content="点击跳转Gitee" data-position="bottom center"><i class="git icon"></i></a>
        <a href="#" class="ui email circular icon button" data-content="LWH_559@163.com" data-position="bottom center"><i class="envelope  icon"></i></a>
    </div>

    <div class="ui wechat-qr flowing popup transition hidden">
        <img src="../static/images/oneStarWechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded image" style="width: 110px">
        <div align="center">微信</div>
    </div>
    <div class="ui qq-qr flowing popup transition hidden">
        <img src="../static/images/qq.jpg" th:src="@{/images/qq.jpg}" alt="" class="ui rounded image" style="width: 110px">
        <div align="center">QQ</div>
    </div>
        <hr class="m-margin-top-small" style="width: 20%">
        <br>
        <div>
            <p>“客官，您好”</p>
            <p>“欢迎鄙临“番茄小站”</p>
            <p>“我是本站的站长，人称“番茄西红柿”</p>
            <br>
            <p>99后的一名野生程序员</p>
            <p>爱编程、喜音乐、好折腾</p>
            <p>我们趋行在人生这个亘古不变的旅途</p>
            <p>在坎坷中奔跑</p>
            <p>在挫折里涅槃</p>
            <p>忧愁缠满全身，痛苦飘洒一地</p>
            <p>别委屈自己，也别强求别人</p>
            <p>这世上总有不期而遇的温柔和生生不息的希望</p>
            <p>人生如逆旅单行道，哪有岁月可回头</p>
            <p>只有用水将心上的雾水淘洗干净，荣光才会照耀最初的梦想</p>
            <p>如果以后没有火炬</p>
            <p>我便是唯一的光！</p>
        </div>
        <hr class="m-margin-top-large">
        <br>
        <h2 class="m-margin-tb-tiny" style="font-size: xx-large;font-weight: bold;color: #F08047;font-family: STSong">打赏本站</h2>
            <div class="ui orange basic label m-margin-tb-tiny">
            <p style="font-size: medium">果您觉得本站非常符合您的口味，您可以适当打赏一下本站，您的支持就是对本站维护下去最大的鼓励</p>
            </div>
            <div class="ui orange basic label">
                <div class="ui images" style="font-size: inherit !important;">
                    <div class="image">
                        <img src="../static/images/zhifupay.jpg" th:src="@{/images/zhifupay.jpg}" alt="" class="ui rounded bordered image" style="width: 180px">
                        <div>支付宝</div>
                    </div>
                    <div class="image">
                        <img src="../static/images/wechatpay.jpg" th:src="@{/images/wechatpay.jpg}" alt="" class="ui rounded bordered image" style="width: 180px">
                        <div>微信</div>
                    </div>
                </div>
            </div>
    </div>
</div>

  <br>
  <br>

  <!--底部栏-->
<footer th:replace="~{_fragment::footer}"></footer>


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

    <!--磁铁线条-->
    <script type="text/javascript" color="0,0,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

    <script>
    // 显示微信
    $('.wechat').popup({
        popup : $('.wechat-qr'),
        position: 'bottom center'
    });

    // 显示QQ
    $('.qq').popup({
        popup : $('.qq-qr'),
        position: 'bottom center'
    });

    // 显示邮箱
    $('.email').popup();

    // 显示github
    $('.github').popup()

    // 显示gitee
    $('.git').popup();
  </script>
    <script th:replace="~{_fragment::script}"></script>
</body>
</html>